<template>
  <v-bottom-navigation
    v-model="bottomNav"
    :value="activeBtn"
    grow
    color="primary"
    fixed
  >
    <v-btn text to="/" class="mx-auto">
      <span>首页</span>
      <v-icon>mdi-home</v-icon>
    </v-btn>
    <v-btn text to="/explore" class="mx-auto">
      <span>发现</span>
      <v-icon>mdi-pen</v-icon>
    </v-btn>
    <v-btn v-if="show" text to="/link" class="mx-auto">
      <span>友链</span>
      <v-icon>mdi-link</v-icon>
    </v-btn>
    <v-btn text to="/about" class="mx-auto">
      <span>关于</span>
      <v-icon>mdi-information-outline</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>
<script>
export default {
  data() {
    return {
      bottomNav: "recent",
      activeBtn: 1,
      show: true
    };
  },
  created() {
    if (localStorage.getItem("name") === null) {
      this.show = false;
    }
  },
  updated() {
    if (localStorage.getItem("name") === null) {
      this.show = false;
    }else{
      this.show = true;
    }
  }
};
</script>
